<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 解决父元素塌陷，方法一 给父元素一个固定的高度 弊端：要根据盒子里面的内容改变父元素的高度*/
        /* 方法二，在元素的最后面加一个空的div  然后给它设置clear:both */
        /* 方法三 伪类清除 
        
        父元素::after{
            内容为空
            content: "";
            块级元素
            display: block;
            清除浮动
            clear: both;
        }
        
        方法四：overflow: hidden;
        */

        .container{
            border: 1px solid red;
            /* height: 500px; */
            /* overflow: hidden; */
        }
        .box1{
            width: 200px;
            height: 200px;
            border: 1px solid rebeccapurple;
            float: left;
        }
        /* .container::after{
            content: "";
            display: block;
            clear: both;
        } */
        .container2{
            height: 200px;
            background-color: royalblue;
        }
        /* .last{
            clear: both;
        } */
    </style>

</head>
<body>
    <div class="container">
        <div class="box1"></div>

        </div>
        <!-- <div class="last"></div> -->
    </div>
    <div class="container2">

    </div>
</body>
</html>